<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>画板游戏</title>
  <script src="../lib/socket-client.js"></script>
  <script src="../lib/easel.js"></script>
  <script src="../lib/tween.js"></script>
</head>

<body>
  <canvas id="myCanvas" width="1000" height="1000"></canvas>

  <script>
    var canvas, stage;
    var drawingCanvas;
    var oldPt;
    var oldMidPt;
    var title;
    var color;
    var stroke;
    var colors;
    var index;

    function init() {
      canvas = document.getElementById("myCanvas");
      index = 0;
      colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#9b4a0b", "#d36600",
        "#fe8a00", "#f9a71f"
      ];

      //check to see if we are running in a browser with touch support
      stage = new createjs.Stage(canvas);
      stage.autoClear = false;
      stage.enableDOMEvents(true);

      createjs.Touch.enable(stage);
      createjs.Ticker.framerate = 24;

      drawingCanvas = new createjs.Shape();

      stage.addEventListener("stagemousedown", handleMouseDown);
      stage.addEventListener("stagemouseup", handleMouseUp);

      title = new createjs.Text("Click and Drag to draw", "36px Arial", "#777777");
      title.x = 300;
      title.y = 200;
      stage.addChild(title);

      stage.addChild(drawingCanvas);
      stage.update();
    }

    function handleMouseDown(event) {
      if (!event.primary) {
        return;
      }
      if (stage.contains(title)) {
        stage.clear();
        stage.removeChild(title);
      }
      color = colors[(index++) % colors.length];
      stroke = Math.random() * 30 + 10 | 0;
      oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
      oldMidPt = oldPt.clone();
      stage.addEventListener("stagemousemove", handleMouseMove);
    }

    function handleMouseMove(event) {
      if (!event.primary) {
        return;
      }
      var midPt = new createjs.Point(stage.mouseX, stage.mouseY);
      drawingCanvas.graphics.clear().setStrokeStyle(stroke, 'round').beginStroke(color).moveTo(midPt.x, midPt
        .y).curveTo(midPt.x, midPt.y, oldMidPt.x, oldMidPt.y);

      oldMidPt.x = midPt.x;
      oldMidPt.y = midPt.y;

      stage.update();
    }

    function handleMouseUp(event) {
      if (!event.primary) {
        return;
      }
      stage.removeEventListener("stagemousemove", handleMouseMove);
    }

    init();
  </script>
</body>

</html>